@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

main{
   width:100%;
   // height:10270px;
   height:auto;
   margin-top:45px;
   .welcom-word{
      color:gray;
   }
   .detail-pic{
      width:35%;height:auto;
      // border:1px solid;
      float: left;
      margin-left:5px;
      position: relative;
      &-normal{
         width:100%;height:auto;
         // border: 1px solid;
         .detail-pic-small{
            width:100%;
            height:auto;
            display: flex;
               li{
                  margin:0 2px;
                  img{height:auto;width:100%;}
               }
         } 
         img{width:100%;height:400px;}  
      }
      &-big{
         border:1px solid;
         position: absolute;
         left:101%;top:0;z-index: 999;
      }
   }
   .detail-info{
      width:60%;height:240px;
      // border:1px solid;
      float:left;
      margin:100px 5px;
      .name{
         margin:10px 5px;
         text-align: center;
         font-size:20px;
         font-weight: 600;
         display: flex;
         span{
            width:65px;height:25px;
            font-weight: normal;
            color:gray;
            padding: 3px;
            font-size:12px;
            border:1px solid gray;
            border-radius: 5px;
         }
      }
      .price-info{
         width:100%;
         height:74px;
         background: rgb(238, 236, 236);
         padding: 5px;
         position: relative;
         // display: flex;
         flex-direction: column;
         .origin-price{
            text-decoration: line-through;
            color:gray;
         }
         .now-price{
            font-size:20px;
            color:orangered;
            margin:10px 0;
            float:left;
         }
         .coupon-value{
            font-size:12px;border:1px dotted red;
            padding:2px 15px;color:red;
            background: rgb(245, 211, 211);
         }
         .sale-num{
            font-size:12px;
            padding-left:10px;
            border-left:1px solid lightgray;
            color:gray;
            position: absolute;
            right:1%;
            z-index:999;
         }
      }
      .cart{
         width:25%;height:auto;
         margin:0 auto;
         padding-top:50px;
         // border:1px solid;
         text-align: center;
         .add-cart,.direct-buy{
            text-decoration: none;
            display: block;color:white;
            width:100%;height:35px;
            border-radius: 5px;
            line-height: 35px;margin:10px auto;
         }
         .add-cart{
            background: rgb(238, 136, 41);
         }
         .direct-buy{
            background: rgb(231, 90, 65);
         }
         a:hover{
            background: black;
         }
      }
   }
   .detail-info-content{
      width:100%;
      height:500px;
   }
   .detailImgContent{
      width:100%;height:auto;margin:10px auto;
      .detailImgBox{
         width:40%;
         height:auto;
         margin:20px auto;
         img{
            width:100%;height:auto;
            display: block;
            // float:left;
         }
      }
   }
}